<template>
  <div class="container_component">
    <el-dialog
      title="插入公式"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleClose"
      :visible="show"
      width="1000px"
      append-to-body
    >
      <div class="main">
        <div style="color: #df801f;margin-bottom: 10px">注：插入后，公式会以latex代码形式显示在输入框中</div>
        <iframe ref="inputIFrameRef" class="iframe" height="560px" width="100%" frameborder="0" scrolling="no" src="/kityformula/index.html"></iframe>
      </div>
      <div class="footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSure">插入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'FormulaDialog',
  data(){
    return {

    }
  },
  props:{
    show:{
      type: Boolean,
      default: false
    }
  },
  methods:{
    handleClose(){
      this.$emit('update:show', false)
    },
    handleSure(){
      const node = this.$refs.inputIFrameRef
      const kfe = node.contentWindow.kfe
      let latex = kfe.execCommand('get.source')
      latex = latex.replace(/\s/g, '') // 去掉空格
      if (latex=='\\placeholder'){
        this.$modal.msgWarning('请输入公式')
        return
      }
      let str = `$ ${latex} $`
      this.$emit('formulaReturn',str)
      this.handleClose()
    }
  }
}
</script>

<style scoped lang="scss">
.footer{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
